<template>
  <div>
    <v-card hover class="d-flex align-start mt-4 rounded-0">
      <v-list-item three-line :to="`/blog/detail/` + blog.id" >
        <v-list-item-content>
          <v-list-item-title class="pb-2 font-weight-black">
            {{ blog.title }}
          </v-list-item-title>
          <v-list-item-subtitle>
            {{ blog.introduction }}
          </v-list-item-subtitle>
          <p class="pt-2 blogInfo">
            <v-avatar size="34">
              <v-img :src="blog.author.headPic"></v-img>
            </v-avatar>
            <span class="text-caption">{{ blog.author.nickname }}</span>
            <span class="grey--text text-caption">{{ blog.time }}</span>
            <span class="green--text text-caption">
              <v-icon color="green" class="mr-1 pb-1" small>mdi-eye</v-icon>
              {{ blog.eye | readCount }}
            </span>
            <span class="red--text text-caption">
              <v-icon color="red" class="mr-1 pb-1" small>mdi-thumb-up</v-icon>
               {{ blog.like | readCount }}
            </span>
            <span class="blue--text text-caption">
              <v-icon color="blue" class="mr-1 pb-1" small>mdi-comment-processing</v-icon>
               {{ blog.comment | readCount }}
            </span>
          </p>
        </v-list-item-content>
      </v-list-item>
      <v-list-item-action>
        <v-list-item-avatar tile width="220" height="90" class="rounded">
          <img :src="blog.cover" alt="">
        </v-list-item-avatar>
      </v-list-item-action>
    </v-card>
  </div>
</template>

<script>
export default {
  name: "BlogCard",
  props: ['blog']
}
</script>

<style lang="less" scoped>
  .blogInfo >span {
    padding-left: 15px;
  }
</style>
